<template>

  <div class="data-view">
    <div class="container">
      <lay-row>
        <topheader :title="title" :subtitle="subtitle"></topheader>
        <centercmp  :data="data" style="height: 100%;"></centercmp>
 
      </lay-row>
      <lay-row>
        <div style="    font-size: 20px;text-shadow: 1px -1px #fff, -1px 1px #555353, -5px 5px 40px #80808080;text-align: center;">最新订单</div>
        <dv-scroll-board :config="config" style="width:100%;height:250px" />
      </lay-row>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import topheader from './components/topheader.vue';
import labeltag from './components/labeltag.vue';
import centercmp from './components/centercmp.vue';
import { useUserStore } from "../../store/user";
// import LeftChart1 from './LeftChart1.vue'
// import LeftChart2 from './LeftChart2.vue'
// import LeftChart3 from './LeftChart3.vue'

// import CenterCmp from './CenterCmp.vue'

// import RightChart1 from './RightChart1.vue'
// import RightChart2 from './RightChart2.vue'

// import BottomCharts from './BottomCharts.vue'
const title = ref('消费管理系统');
const subtitle = ref('食堂消费系统');
const user = useUserStore();
const sse = ref<EventSource>();
const data = ref({record:[],order:[],food:0});
const config= ref({
  header: ['订单编号', '送餐点','套餐', '数量','订单状态','备注'],
  data: [],
  index: true,
  columnWidth: [50],
  align: ['center']
})
const getstatus = (f: any) => {
    f = f + "";
    switch (f) {

        case '-1':
            return '删除';
        case '0':
            return '待接单';
        case '1':
            return '备货中';
        case '2':
            return '送货中';
        case '3':
            return '已送达';
        case '4':
         return '已完成';
         case '5':
         return '已取消';
        default:
            return '未知';
    }
}
const toRefreshQrcode = async () => {
  if (user.userInfo.userid) {
    sse.value = new EventSource('/v1/api/consumptionsse/Sse?uid=' + user.userInfo.userid, {

    });

    // let { data, code, msg } = await loginQrcode()
    // if (code == 200) {
    //   loginQrcodeText.value = data.data
    // } else {
    //   layer.msg(msg, { icon: 2 })
    // }
    // 监听message事件以接收数据  
    sse.value.onmessage = function (event: any) {
      var da = JSON.parse(event.data);

      if (da.success) {
        var arr = ['早餐', '中餐', '晚餐', '夜宵', '其他'];
        let newrecord = [] as any;
        let newdata = [] as any;
        arr.map((item: any, index: number) => {
          if (da.data.record.findIndex((c: any) => c.mealtype == item) == -1) {
            newrecord.push({ name: item, value: 0 });
          } else {
            newrecord.push({ name: item, value: da.data.record.find((c: any) => c.mealtype == item).mealtypecount });
          }
          if (da.data.order.findIndex((c: any) => c.mealtype == item) == -1) {
            newdata.push({ name: item, value: 0 });
          } else {
            newdata.push({ name: item, value: da.data.order.find((c: any) => c.mealtype == item).mealtypecount });
          }
        });
       // header: ['订单编号', '套餐', '数量','订单状态','备注'],
        config.value.data= da.data.data.map((v:any)=>{return [v.orderno,v.address,v.title,v.count,getstatus(v.status),v.note]})
        data.value = { record: newrecord, order: newdata,food:da.data.food };


      }
      console.log(da);
    };

    // 监听open事件（连接建立时触发）  
    sse.value.onopen = function (event: any) {
      console.log("连接已打开");
    };

    // 监听error事件（发生错误时触发）  
    sse.value.onerror = function (event: any) {
      if (sse.value?.readyState === EventSource.CLOSED) {
        console.log("你可以在这里尝试重新连接");
        // 你可以在这里尝试重新连接  
      }
    };
  }

}
toRefreshQrcode();
</script>

<style lang="less">
#dv-full-screen-container {
  top: 90px !important;
  position: unset !important;
  width: 100% !important;
  height: 100% !important;
}

.dv-border-box-1 {
  border-color: #00c1de !important;
  border-width: 2px !important;
  background-color: transparent !important;
}

.data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;


  .container {
    background-image: url('/images/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    text-align: center;

    .mh-left {
      font-size: 20px;
      color: rgb(1, 134, 187);

      a:visited {
        color: rgb(1, 134, 187);
      }
    }

    .mh-middle {
      font-size: 30px;
      text-shadow: 1px -1px #fff, -1px 1px #555353, -5px 5px 40px #80808080;
    }

    .mh-left,
    .mh-right {
      width: 450px;
    }
  }

  .main-container {
    height: calc(~"100% - 80px");

    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .left-chart-container {
    width: 22%;
    padding: 10px;
    box-sizing: border-box;

    .border-box-content {
      flex-direction: column;
    }
  }

  .right-main-container {
    width: 78%;
    padding-left: 5px;
    box-sizing: border-box;
  }

  .rmc-top-container {
    height: 100%;
    display: flex;
  }

  .rmctc-left-container {
    width: 65%;
  }

  .rmctc-right-container {
    width: 35%;
  }

  .rmc-bottom-container {
    height: 35%;
  }

  .rmctc-chart-1,
  .rmctc-chart-2 {
    height: 50%;
  }
}
</style>
